<template>
  <div class="container" id="projects" >
    <h1 class="title">My Projects</h1>
    <ul class="filter-bar">
      <li
        v-bind:class="['filter-item', {__active: index === cate}]"
        v-for="(filter, index) of filters"
        v-on:click="handleFilter(index)"
        :key="index"
      >{{filter}}</li>
    </ul>
    <div class="pro-list">
      <div class="pro-list-item" v-for="(project, index) of projects" :key="index">
        <span class="pro-list-item-ttl">{{project.type}}</span>
        <div class="pro-list-item-text">{{project.text}}</div>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        filters: ['All', 'Html', 'JavaScript'],
        projects: [
          { type: 'Html', text: 'asdasdasdasdasdasdasdasdsdasdasdasdsasfsdhfsdkjf' },
          { type: 'Html', text: 'asdasdasdasdasdasdasdasdsdasdasdasdsasfsdhfsdkjf' },
          { type: 'JavaScript', text: 'asdasdasdasdasdasdasdasdsdasdasdasdsasfsdhfsdkjf' },
          { type: 'JavaScript', text: 'asdasdasdasdasdasdasdasdsdasdasdasdsasfsdhfsdkjf' },
        ],
        cate: 0,
      }
    },
    methods: {
      handleFilter(index) {
        this.cate = index;
      }
    }
  }
</script>

<style>
  .filter-bar {
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-bottom: 2em;
    background: #F7E612;
  }
  .filter-item {
    position: relative;
    display: inline-block;
    height: 100%;
    padding: 0 2em;
    margin: 0 .5em;
  }
  .filter-item:hover {
    color: var(--green);
  }
  .filter-item.__active {
    color: #000;
    background: var(--green);
  }
  .filter-item.__active::after {
    position: absolute;
    display: inline-block;
    content: '';
    width: 0;
    height: 0;
    left: 50%;
    bottom: -10px;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: var(--green) transparent transparent transparent; 
    transform: translateX(-50%);
  }
  .pro-list {
    overflow: hidden;
  }
  .pro-list-item {
    position: relative;
    float: left;
    width: 360px;
    height: 240px;
    margin: 2em 15px 0 15px;
    cursor: pointer;
    background: url(../images/test.jpg);
    background-size: 100%;
  }
  .pro-list-item::before {
    display: none;
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
  }
  .pro-list-item::after {
    position: absolute;
    display: block;
    content: '';
    width: 0;
    height: 2px;
    top: 35%;
    left: 5%;
    background: #fff;
    transition: width 300ms ease-in-out;
  }
  .pro-list-item:hover::before {
    display: block;
  }
  .pro-list-item:hover::after {
    width: 90%;
  }
  .pro-list-item-ttl,
  .pro-list-item-text {
    position: absolute;
    color: #fff;
  }
  .pro-list-item-ttl {
    display: none;
    width: 90%;
    top: 1em;
    left: 50%;
    font-family: var(--fontStyle);
    font-size: 32px;
    transform: translateX(-50%);
    transition: display 500ms ease-in-out;
  }
  .pro-list-item-text {
    width: 90%;
    left: 50%;
    bottom: 40%;
    line-height: 1.5;
    word-wrap: break-word;
    transform: translateX(60%) scaleZ(0);
    transition: transform 300ms ease-in-out;
  }
  .pro-list-item:hover > .pro-list-item-ttl {
    display: block;
  }
  .pro-list-item:hover > .pro-list-item-text {
    transform: translateX(-50%) scaleZ(1);
  }
</style>